<template>
  <div id="carStation">
    <SearchForm v-model="ruleForm" :dataJ="dataJ" @search-form="searchForm" />
    <BkBtn :btnConfig="btnConfig" />
    <BkTable
      :tableHead="tableJ"
      :tableData="tableData"
      :total="total"
      :page="page"
      @getList="getList"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="dialogTitle"
      width="600px"
      :before-close="dialogClosed"
    >
      <el-form
        :inline="true"
        :model="stationForm"
        :rules="stationRules"
        ref="stationForm"
        class="el-form-item_block"
        size="small"
      >
        <el-form-item
          label="场站名称"
          label-width="80px"
          prop="stationName"
          class="el-form-item"
        >
          <el-input
            v-model.trim="stationForm.stationName"
            placeholder="请输入场站地址"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="场站地区"
          label-width="80px"
          prop="stationAreaIds"
          class="el-form-item"
        >
          <el-cascader
            v-model="stationForm.stationAreaIds"
            ref="cascader"
            :options="areaList"
            :props="{
              label: 'regionName',
              value: 'regionCode',
              children: 'children',
            }"
            clearable
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="场站地址"
          label-width="80px"
          prop="stationAddress"
          class="el-form-item"
        >
          <el-input
            v-model.trim="stationForm.stationAddress"
            placeholder="请输入场站地址"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="营业时间"
          label-width="80px"
          class="el-form-item"
          required
        >
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-time-picker
                placeholder="选择时间"
                v-model="stationForm.startTime"
                value-format="HH:mm"
                format="HH:mm"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-time-picker
                placeholder="选择时间"
                v-model="stationForm.endTime"
                value-format="HH:mm"
                format="HH:mm"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="场站容量"
          label-width="80px"
          prop="stationCap"
          class="el-form-item"
        >
          <el-input
            v-model.trim="stationForm.stationCap"
            placeholder="请输入场站容量"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="是否启动"
          label-width="80px"
          prop="delFlag"
          class="el-form-item"
        >
          <el-switch
            v-model="stationForm.delFlag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClosed" type="info" plain size="small"
          >取消</el-button
        >
        <el-button @click="submitForm('Form')" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAreaList } from "@/api/common";
import { stationListsByPage, createStation } from "@/api/stations";
export default {
  name: "",
  components: {},
  data() {
    return {
      ruleForm: {},
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
      dialogTitle: "",
      areaList: [],
      stationForm: {
        stationName: "",
        stationAreaIds: [],
        stationAddress: "",
        startTime: "",
        endTime: "",
        stationCap: "",
        delFlag: "1",
      },
      stationRules: {
        stationName: [
          { required: true, message: "请输入场站名称", trigger: "blur" },
        ],
        stationAreaIds: [
          { required: true, message: "请选择场站地区", trigger: "change" },
        ],
        stationAddress: [
          { required: true, message: "请输入场站名称", trigger: "blur" },
        ],
        startTime: [
          {
            required: true,
            message: "请选择营业时间",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择歇业时间",
            trigger: "blur",
          },
        ],
        stationCap: [
          { required: true, message: "请输入场站容量", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dataJ() {
      return [
        {
          label: "场站名称",
          prop: "stationName",
          type: "input",
        },
      ];
    },
    btnConfig() {
      return [
        {
          label: "新增",
          Fn: this.createStations,
          icon: "el-icon-plus",
        },
      ];
    },
    tableJ() {
      return [
        {
          prop: "stationName",
          label: "场站名称",
        },
        {
          prop: "stationAreaName",
          label: "场站区域",
        },
        {
          prop: "stationAddress",
          label: "场站地址",
        },
        {
          prop: "startTime",
          label: "营业时间",
        },
        {
          prop: "endTime",
          label: "歇业时间",
        },
        {
          prop: "stationCap",
          label: "场站容量",
        },
        {
          prop: "delFlagName",
          label: "是否启用",
        },
        {
          label: "操作",
          width: "100px",
          btnList: [
            {
              name: "启用",
              type: "text",
              isShow: (row) => {
                return row.delFlag == 2
              },
              handleClick: (val) => {
                this.startStations(val);
              },
            },
            {
              name: "停用",
              type: "text",
              isShow: (row) => {
                return row.delFlag == 1
              },
              handleClick: (val) => {
                this.stopStations(val);
              },
            },
          ],
        },
      ];
    },
  },
  watch: {},
  created() {},
  async mounted() {
    this.areaList = await getAreaList();
    this.getList();
  },
  methods: {
    searchForm() {
      this.page.pageNum = 1;
      this.getList();
    },
    async getList() {
      let data = {
        ...this.ruleForm,
        ...this.page,
      };
      let res = await stationListsByPage(data);
      this.tableData = res.records;
      this.total = res.total;
    },
    dialogClosed() {
      this.$refs.stationForm.resetFields()
      this.dialogVisible = false;
    },
    stopStations() {

    },
    createStations() {
      this.dialogTitle = "新增场站";
      this.dialogVisible = true;
    },
    async submitForm() {
      this.$refs.stationForm.validate(async (valid) => {
        if (valid) {
          const node = this.$refs.cascader.getCheckedNodes()
          const codes = node && node[0].path
          const labels = node && node[0].pathLabels
          console.log(codes, labels)
          let data = {
            ...this.stationForm,
            provinceCode: codes && codes[0],
            provinceName: labels && labels[0],
            urbanCode: codes && codes[1],
            urbanName: labels && labels[1],
            areaCode: codes && codes[2],
            areaName: labels && labels[2],
          }
          await createStation(data);
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "创建成功",
          });
          this.dialogClosed()
          this.getList();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
